<template>
	<view>
		<view v-if="recordList.length === 0" class="no-record"> 暂无奖励 </view>
		<scroll-view v-else scroll-y="true" class="record-list">
			<view v-for="record in recordList" :key="record.id" class="record-item" @click="goToDetails(record.id)">
				<!-- 第一行: 奖惩时间 -->
				<view class="first-row">
					<text class="jl-date">{{ record.jlDate }}</text>
				</view>
				<!-- 第二行: 奖惩名称 -->
				<view class="second-row">
					<text class="jl-name">{{ truncatedName(record.jlName) }}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import isHaveBug from "../../../utils/bug";
import {
		rewardList
	} from "@/api/work/reward";
	export default {
		data() {
			return {
				recordList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 1000,
					params: {
						startDate: "",
						endDate: "",
					},
				},
			};
		},
		mounted() {
			this.fetchSalaryData();
		},
		methods: {
			fetchSalaryData() {
				rewardList(this.queryParams)
					.then((response) => {
						this.recordList = response.rows || [];
						if(isHaveBug("HR-APP-025")){
							if (this.recordList.length > 1){
								this.recordList = [this.recordList[0]]
							}
						}
						console.log(response.rows);
					})
					.catch((error) => {
						console.error("Error fetching salary data:", error);
					});
			},
			truncatedName(name) {
				return name.length > 15 ? name.slice(0, 15) + "..." : name;
			},
			goToDetails(id) {
				// 将考评记录传递到明细页面
				uni.navigateTo({
					url: `/pages/work/incentiveDetails/incentiveDetails?id=${id}`,
				});
			},
			handleStartDateChange(e) {
				this.queryParams.params.startDate = e.detail.value;
			},
			handleEndDateChange(e) {
				this.queryParams.params.endDate = e.detail.value;
			},
			resetFilters() {
				this.queryParams.params.startDate = "";
				this.queryParams.params.endDate = "";
				this.fetchSalaryData();
			},
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: `/pages/work/sx/sx?startDate=${this.queryParams.params.startDate}&endDate=${this.queryParams.params.endDate}&type=jl`,
				events: {
					timeScreen: (startDate, endDate) => {
						this.queryParams.params.startDate = startDate;
						this.queryParams.params.endDate = endDate;
						this.fetchSalaryData();
					}
				}
			});
		}
	};
</script>

<style scoped>
	.no-record {
		text-align: center;
		font-size: 18px;
		color: #888;
		padding: 20px;
	}

	.record-list {
		padding: 15px;
	}

	.record-item {
		margin-bottom: 15px;
		padding: 10px;
		border-radius: 8px;
		background-color: #f9f9f9;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.first-row,
	.second-row {
		margin-bottom: 5px;
		color: #555;
	}

	.jl-date {
		font-size: 14px;
		font-weight: bold;
	}

	.jl-name {
		font-size: 14px;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
</style>